'use strict';

import React, {Component, PropTypes} from 'react';
import {Selected, Close, Badge} from 'amazeui-react';

export default class Select extends Component {
	/*
	 * 构造函数。
	 * @param props 只读属性
	 */
	constructor(props) {
		super(props);

		let data = [];
		for (let i = 0; i < this.props.layer; i++) {
			data.push(i === 0 ? [].concat(this.props.data) : []);
		}

		this.state = {
			data: data,
			value: ['','',''],
			list: [],
		}
	}

	/*
	 * 获取选中值。
	 * @return string 选中值
	 */
	getValue() {
		let value = this.state.list.map((x, i) => {
			return x.value;
		});

		return value.toString();
	}

	/*
	 * 获取选中标签名。
	 * @return string 标签名
	 */
	getLabel() {
		let value = this.state.list.map((x, i) => {
			return x.label;
		});

		return value.toString();
	}

	/*
	 * 通过value获取子级数据。
	 * @param array data 数据
	 * @param string value 选中值
	 * @return array 子级数据
	 */
	getChildrenByValue(data, value) {
		let children = [];
		for (let i in data) {
			if (data[i].value === value) {
				children = data[i].children != false ? data[i].children : [];
				break;
			}
		}

		return children;
	}

	/*
	 * 通过value获取标签。
	 * @param array data 选项数据
	 * @param string value 选中值
	 * @return string 标签
	 */
	getLabelByValue(data = [], value) {
		let label = '';
		for (let i = 0; i < data.length; i++) {
			if (data[i].value === value) {
				label = data[i].label;
				break;
			}
		}

		return label;
	}

	/*
	 * 设置默认值。
	 */
	setDefaultValue() {
		let value = this.state.value;
		let data = this.state.data;

		let list = !this.props.defaultValue
			|| this.props.defaultValue === 'undefined' 
			? [] 
			: this.props.defaultValue.split(',');

		list = list.map((x, i) => {
			let separator = this.props.separator;
			let part = x.split(separator);
			let label = '';

			for (let i = 0; i < part.length; i++) {
				value[i] = part[i];
				let text = this.getLabelByValue(data[i], part[i]);
				label += i === 0 ? text : (separator + text);
				if ((i + 1) < part.length) {
					data[i + 1] = this.getChildrenByValue(data[i], part[i]);
				}
			}

			return {
				value: x,
				label: label
			};
		});

		this.setState({value, data, list});
	}

	/*
	 * 删除列表项。
	 * @param int index 序号
	 */
	deleteListItem(index) {
		let list = this.state.list;
		list.splice(index, 1);
		this.props.onChange(list);

		this.setState({
			list: list,
		});
	}

	/*
	 * 检查列表项是否存在。
	 * @param item 列表项
	 * @return 存在返回true，不存在返回false。
	 */
	isExisted(item) {
		let list = this.state.list;
		for (let i = 0; i < list.length; i++) {
			if (list[i].value === item.value) {
				return true;
			}
		}

		return false;
	}

	/*
	 * 选择改变时。
	 * @param string value 选中值
	 */
	handleChange(index) {
		let layer = this.props.layer;
		let list = this.state.list;
		let multiple = this.props.multiple;
		
		if (layer === (index + 1)) {
			let item = {
				value: '',
				label: '',
			};
			let separator = this.props.separator;
			for (let i = 0; i < layer; i++) {
				let value = this.refs['select' + i].getValue();
				item.value += i === 0 ? value : (separator + value);
				let label = this.getLabelByValue(this.state.data[i], value);
				item.label += i === 0 ? label : (separator + label);
			}
			if (!this.isExisted(item)) {
				list = multiple ? list.concat([item]) : [item];
			}
			this.props.onChange(item);
			this.setState({
				list: list,
			});
		} else {
			let value = this.refs['select' + index].getValue();
			let data = this.state.data;
			for (let i = index; i < (layer - 1); i++) {
				data[i + 1] = i === index ? this.getChildrenByValue(data[i], value) : [];
			}
			this.setState({
				data: data,
				list: multiple ? list : [],
			});
		}
	}

	/*
	 * 第一次渲染后。
	 */
	componentDidMount() {
		this.setDefaultValue();
	}

	/*
	 * 渲染。
	 */
	render() {
		let selects = [];
		for (let i = 0; i < this.props.layer; i++) {
			selects.push(
				<Selected
					key={i}
					data={this.state.data[i]}
					placeholder={this.props.placeholder[i]}
					onChange={value => {
						this.handleChange(i);
					}}
					searchBox
					ref={'select' + i}
					maxHeight={100}
					value={this.state.value[i]}
					btnWidth={this.props.width}
				/>
			);
		}

		let list = !this.props.multiple ? '' : this.state.list.map((x, i) => {
			return (
				<Badge 
					key={i}
					radius
					className="am-margin-vertical-xs am-margin-right-xs"
				>
					{this.state.list[i].label}
					<Close 
						spin
						onClick={e => {
							e.preventDefault();
							this.deleteListItem(i);
						}}
					/>
				</Badge>
			);
		});
		
		return (
			<div 
				className={this.props.className ? (this.props.className + ' am-inline-block') : 'am-inline-block'}
				style={{
					width: this.props.width,
					verticalAlign: 'top'
				}}
			>
				{selects}
				<div>{list}</div>
			</div>
		);
	}
}

Select.propTypes = {
	layer: PropTypes.oneOf([1,2,3]),
	data: PropTypes.array.isRequired,
	placeholder: PropTypes.array,
	onChange: PropTypes.func,
	defaultValue: PropTypes.string,
	multiple: PropTypes.bool,
	width: PropTypes.number,
	separator: PropTypes.string,
	className: PropTypes.string,
};
Select.defaultProps = {
	layer: 1,
	onChange: () => {},
	placeholder: [],
	separator: '-',
};
